<template>
	<view>
		<uni-section class="mb-10" title="商户" type="line">
			<template v-slot:right>
				{{indexSpList.nickname}}
			</template>
		</uni-section>
		<uni-section class="mb-10" title="款号" type="line">
			<template v-slot:right>
				{{indexSpList.ddkh}}
			</template>
		</uni-section>
		<uni-section class="mb-10" title="名称" type="line">
			<template v-slot:right>
				{{indexSpList.name}}
			</template>
		</uni-section>
		<uni-section class="mb-10" title="特征1" type="line">
			<template v-slot:right>
				{{indexSpList.bz1}}
			</template>
		</uni-section>
		<uni-section class="mb-10" title="特征2" type="line">
			<template v-slot:right>
				{{indexSpList.bz2}}
			</template>
		</uni-section>
		
	</view>
	<uni-section title="选择图片" type="line">
		<view class="example-body">
			<uni-file-picker ref="imgPicker" limit="1" :imageStyles="imageStyles" @select="selectImg" @delete="delImg"></uni-file-picker>
		</view>
	</uni-section>
	<view class="pageText">
		<span>{{pageData.page}}/{{pageData.pageMax}}</span>
	</view>
	<view class="btnList">
		<view class="leftPage">
			<button type="primary" :disabled='this.pageData.page===1' class="pageBtn" @click="pageControl('up')">上一个</button>
		</view>
		<view class="search">
			<input type="text" class="searchName" v-model="nickname" @input="getSpNotPicByName" placeholder="商户">
		</view>
		<view class="search">
			<input type="text" class="searchName" v-model="ddkh" @input="getSpNotPicByName" placeholder="款号">
		</view>
		<view class="rightPage">
			<button type="primary" :disabled='this.pageData.page===this.pageData.pageMax' class="pageBtn" @click="pageControl('down')">下一个</button>
		</view>
	</view>
	
	<view class="btnList2">
		<button type="primary" @click="useAgain">复用</button>
		<button type="primary" @click="uploadFile">提交</button>
	</view>
</template>

<script>
import config from '../../../utils/config.js'
export default{
	onLoad(){
		this.getSpNotPicByName()
	},
	data(){
		return{
			imageStyles: {width: 300,height: 300},
			spList:[],
			indexSpList:{},
			nickname:'',
			ddkh:'',
			imgTemp: [],
			pageData:{
				page:1,
				pageMax:1,
			}
		}
	},
	methods:{
		// 查询没有照片的商品
		getSpNotPicByName(){
			let that = this
			this.request({
				url: config.baseUrl + "/wx/getSpNotPicByName",
				data: {
					nickname: that.nickname,
					ddkh: that.ddkh,
				},
			}).then(res => {
				that.spList = res.data
				that.pageData.pageMax = res.num
				this.indexSpList = this.spList[this.pageData.page - 1]
			})
		},
		// 页数变更
		pageControl(model){
			switch(model){
				case 'index':
					this.pageData.page = 1
					break
				case 'up':
					this.pageData.page -= 1
					break
				case 'down':
					this.pageData.page += 1
					break
				case 'now':
					break
			}
			this.indexSpList = this.spList[this.pageData.page - 1]
		},
		// 选择照片
		selectImg(res){
			this.imgTemp = res.tempFiles
		},
		// 删除照片
		delImg(res){
			this.imgTemp = []
			this.$refs.imgPicker.files = []
		},
		// 上传按钮
		uploadFile(res){
			let that = this
			uni.uploadFile({
				url: config.baseUrl + '/wx/uploadPicToSp', 
				filePath: that.imgTemp[0]['path'],
				name: 'file',
				formData: {
					'spid': that.indexSpList['id']
				},
				success: (res) => {
					that.pageControl('now')
					that.getSpNotPicByName()
					that.delImg()
				}
			});
		},
		// 复用
		useAgain(){
			let that = this
			this.request({
				url: config.baseUrl + "/wx/usePicAgain",
				data: {	
					spid: that.indexSpList['id']
				},
			}).then(res => {
				if (res.status === 200){
					that.pageControl('now')
					that.getSpNotPicByName()
					that.delImg()
				}else{
					uni.showToast({
						title: res.data,
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})  

				}
			
			})
		}
	}
	
}
</script>

<style lang="scss">
	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.pageText{
		text-align: center;
	}
	.btnList{
		text-align: center;
		width: 100%;
		.leftPage{width: 30%;display: inline-block;}
		.search{width:20%;display: inline-block;text-align: center;}
		.rightPage{width: 30%;display: inline-block;}
	}
	.pageBtn{
		border-radius: 40rpx;
		margin-top: 50rpx;
		
		height: 100rpx;
		background-color: royalblue;
	}
	.searchName{
		border: 1rpx solid black;
		height: 80rpx;
		border-radius: 20rpx;
		text-align: center;
		margin: 10rpx;
		width: 130rpx;
	}
	.btnList2{
		text-align: center;
		width: 100%;
		padding-left:210rpx;
		
		button{
			float: left;
			margin: 20rpx;
			background-color: royalblue;
		}
	}
</style>